<template>
  <div class="user-info">
    <div class="q-pa-md" style="max-width: 300px">
      <div class="q-gutter-md">
        <q-form @submit="handleSave">
          <q-input
            v-model="nickname"
            :dense="true"
            :rules="[
              val =>
                (val && val.length > 0 && val.length <= 16) ||
                '请输入1-16位昵称',
            ]"
            label="昵称"
          />
          <q-input
            v-model="phone"
            :dense="true"
            :rules="[
              val => (val && val.length === 11) || '请输入正确的手机号码',
            ]"
            label="手机号"
          />
          <q-field borderless>
            <template v-slot:prepend>
              <span class="form-label">年龄</span>
            </template>
            <template v-slot:control>
              <q-slider v-model="age" :min="0" :max="100" label />
            </template>
          </q-field>
          <q-field borderless>
            <template v-slot:prepend>
              <span class="form-label">性别</span>
            </template>
            <template v-slot:control>
              <q-radio v-model="sex" :val="1" label="男" />
              <q-radio v-model="sex" :val="2" label="女" />
              <q-radio v-model="sex" :val="3" label="保密" />
            </template>
          </q-field>
          <div style="text-align: center; margin-top: 20px">
            <q-btn
              :loading="loading"
              label="保存"
              type="submit"
              color="primary"
            />
          </div>
        </q-form>
      </div>
    </div>
  </div>
</template>

<script>
import { updateUser, queryUser } from '@/api';

export default {
  data() {
    return {
      nickname: '',
      phone: '',
      age: null,
      sex: 1,
      loading: false,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    // 查询用户信息
    async getUserInfo() {
      try {
        const info = this.$storage.get('_i');
        const { uid } = info;
        const res = await queryUser({ uid });
        if (res.code === 20000) {
          this.nickname = res.data.nickname;
          this.phone = res.data.phone;
          this.age = res.data.age;
          this.sex = res.data.sex;
        } else {
          this.$q.notify(res.message);
        }
      } catch (err) {
        this.$q.notify('获取用户信息失败');
      }
    },
    // 保存
    async handleSave() {
      try {
        this.loading = true;
        const info = this.$storage.get('_i');
        const { uid, email } = info;
        const { nickname, phone, age, sex } = this;
        const res = await updateUser({ uid, email, nickname, phone, age, sex });
        this.loading = false;
        this.$q.notify(res.message);
      } catch (err) {
        this.$q.notify('保存失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.q-radio {
  font-size: 12px;
}
</style>
